<!--
 * @Author: zhangjingyu
 * @Date: 2021-03-30 14:22:12
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-03-30 16:00:17
 * @FilePath: \vprisk10.14\src\views\ftpManage\pricingTrial\pricingTest\com\repayCurveList.vue
 * @Description: 偿还曲线表组件
-->
<template>
  <div>
    <el-row style="height:50px">
      <el-button @click="addF">新增</el-button>
    </el-row>
    <el-table ref="multipleTable" :data="data" v-show="data.length>0">
      <el-table-column prop="term" label="期限" :formatter="termFormat"> </el-table-column>
      <el-table-column prop="balanceRadio" label="余额占比"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link style="color:red;margin-right:10px" @click="editF(scope.$index, scope.row)"
            >编辑</el-link>
          <el-link style="color:red" @click="delrow(scope.$index)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="titleList[saveFlg - 1]"
      append-to-body
      v-dialogDrag
      :visible.sync="addOrEdit"
      width="514px"
    >
      <el-form :model="saveForm" ref="saveForm" :rules="saveFormRules" label-position="left" label-width="120px">
        <el-form-item label="期限:" prop="term">
          <el-form-item prop="term" style="display: inline-block;width: 100px;">
            <el-input v-model="saveForm.term"></el-input>
          </el-form-item>
          <el-form-item
            prop="termMult"
            style="display: inline-block;width: 100px;"
          >
            <el-select v-model="saveForm.termMult" style="width:100%">
              <el-option
                v-for="item in termList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="余额占比(%):" prop="balanceRadio">
          <el-input
            v-model="saveForm.balanceRadio"
            placeholder="请输入"
            maxlength="40"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="saveF">确定</el-button>
        <el-button @click="addOrEdit = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      addOrEdit: false,
      titleList: ["新增偿还曲线法余额占比信息", "编辑偿还曲线法余额占比信息"],
      termList: [
        { value: "Y", label: "年" },
        { value: "M", label: "月" },
        { value: "D", label: "日" }
      ],
      saveFlg: 1,
      saveForm: {},
      saveFormRules: {
        term: [
          {
            required: true,
            message: "该项为必填",
            trigger: "blur"
          },
          {
            pattern: /^[0-9]{0,9}$/,
            message: "只能输入小于9位正整数",
            trigger: "blur"
          }
        ],
        termMult: [
          {
            required: true,
            message: "请补全期限",
            trigger: "blur"
          }
        ],
        balanceRadio: [
          {
            required: true,
            message: "该项为必填",
            trigger: "blur"
          },
          {
            pattern: /(^[0-9]{1,2}$)|(^[0-9]{1,2}[\.]{1}[0-9]{1,6}$)|(^100$)|(^100[\.]{1}[0]{1,6}$)/,
            message: "只能输入100以内，小数位数小于6位的数字",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    addF() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.addOrEdit = true;
    },
    editF(index, row) {
      this.saveFlg = 2;
      this.editIndex = index;
      this.saveForm = { ...row };
      this.saveForm.termMult = row.term.substr(row.term.length-1,1);
      this.saveForm.term = row.term.substr(0,row.term.length-1);
      this.addOrEdit = true;
    },
    saveF() {
      this.$refs["saveForm"].validate(valid => {
        if (valid) {
          let data = { ...this.saveForm };
          data.term+=data.termMult;
          delete data.termMult;
          if (this.saveFlg == 1) {
            this.data.push(data);
          }
          if (this.saveFlg == 2) {
            this.data[this.editIndex] = data;
            this.data.push({});
            this.data.pop();
          }
          this.addOrEdit = false;
        }
      });
    },
    delrow(index) {
      this.data.splice(index, 1);
    },
    termFormat(row){
        return   row.term.substr(0,row.term.length-1)+ this.$getLabel(row.term.substr(row.term.length-1,1),this.termList);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>